<template>
  <div>
    <van-field v-model="text"
     :label="label"
     :type="type"
     :placeholder="placeholder"
     :rule="rule"/>
  </div>
</template>

<script>
export default {
  props: ['label', 'type', 'placeholder', 'rule'],
  data () {
    return {
      text: ''
    }
  },
  methods: {
    // 对输入框内容进行正则校验
    handleRule () {
      const reg = new RegExp(this.rule)
      if (reg.test(this.text)) {
        this.$emit('inputChange', this.text)
      }
    }
  },
  watch: {
    text () {
      this.handleRule()
    }
  }
}
</script>

<style>

</style>
